import Taro from '@tarojs/taro'
import { View, Text, Image, Picker } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'

import ListItem from '../../components/listItem'
import { getProfile, updateGender } from '../../api/profile'
import { showToast, setUpdatePage, getUpdatePage } from '../../utils'

class Profile extends Taro.Component {
  config = {
    navigationBarTitleText: '个人资料'
  }

  state = {
    // current: 0,
    profile: {id: ''},
    gender: ['男', '女']
  }

  getProfile = async () => {
    const res = await getProfile()
    res.data.sex = res.data.sex === 1 ? '男' : '女'

    this.setState({
      profile: res.data
    })
  }

  componentDidShow() {
    getUpdatePage(this.getProfile)
  }

  componentDidMount() {
    this.getProfile()
  }

  onGenderChange = async ev => {
    const genderKey = this.state.profile.sex === '男' ? 1 : 2

    if (genderKey - 1 == ev.detail.value) return

    Taro.showLoading()

    const res = await updateGender({content: ev.detail.value + 1})

    Taro.hideLoading()

    if (res.code === 1) {
      showToast('修改成功！')

      this.setState({
        profile: {
          ...this.state.profile,
          sex: this.state.gender[ev.detail.value]
        }
      })
    } else {
      showToast('修改失败！')
    }
  }

  preview = () => {
    Taro.chooseImage({
      count: 1,
      success: async res => {
        Taro.showLoading()

        const token = await Taro.getStorage({
          key: 'token'
        })

        Taro.uploadFile({
          url: `https://erp.webapi${process.env.NODE_ENV === 'production' ? '' : '.testing'}.cl-zenith.com/AiPartnerCourese/UploadFile`,
          filePath: res.tempFilePaths[0],
          name: 'head',
          header: {
            Authorization: token.data
          },
          success: ({ data }) => {
            const res = JSON.parse(data)

            Taro.hideLoading()

            if (res.code === 1) {
              showToast('修改成功！')
              setUpdatePage()

              this.setState({
                profile: {
                  ...this.state.profile,
                  imgUrl: res.data.imgUrl
                }
              })
            } else {
              showToast('修改失败！')
            }
          }
        })
      }
    })
  }

  render() {
    // const tabList = [{ title: '基本信息' }, { title: '银行卡信息' }]
    const { current, profile, gender } = this.state

    return (
      <View className="page">
        <View className="list" style={{ margin: '8Px 0' }}>
          <ListItem label="头像" border>
            <View onClick={ this.preview }>
              <Image src={ profile.imgUrl ? profile.imgUrl : require('../../assets/images/head_pic.png') } />
              <View className="at-icon at-icon-chevron-right" />
            </View>
          </ListItem>
          <ListItem label="姓名" border>
            <Text>{ profile.name }</Text>
          </ListItem>
          <ListItem label="性别" border>
            <View>
              <Picker
                mode="selector"
                range={ gender }
                value={ profile.sex === '男' ? 0 : 1 }
                onChange={ this.onGenderChange }
              >
                { profile.sex }
              </Picker>
              <View className="at-icon at-icon-chevron-right" />
            </View>
          </ListItem>
          <ListItem label="手机号">
            <Navigator url="changePhone" hoverClass="none">
              <Text>{ profile.mobile }</Text>
              <View className="at-icon at-icon-chevron-right" />
            </Navigator>
          </ListItem>
        </View>
        <View className="list" style={{ margin: '8Px 0' }}>
          <ListItem label="合伙人编号" border>
            <Text>{ String(profile.id).padStart(6, 0) }</Text>
          </ListItem>
          <ListItem label="合伙人级别" border>
            <Text>{ profile.levelStr }</Text>
          </ListItem>
          <ListItem label="上级合伙人" border>
            <Text>{ profile.superiorPartnerStr }</Text>
          </ListItem>
          <ListItem label="上级合伙人手机号">
            <Text>{ profile.superiorPartnerMobile }</Text>
          </ListItem>
        </View>
      </View>
      // <AtTabs
      //   current={ current }
      //   tabList={ tabList }
      //   onClick={ this.handleClick.bind(this) }
      // >
      //   <AtTabsPane current={ current } index={ 0 }>
      //     <View className="list" style={{ marginTop: '8Px' }}>
      //       <ListItem label="头像" border>
      //         <View>
      //           <Image src={ require('../../assets/images/head_pic.png') } />
      //           <View className="at-icon at-icon-chevron-right" />
      //         </View>
      //       </ListItem>
      //       <ListItem label="姓名" border>
      //         <Text>古天乐</Text>
      //       </ListItem>
      //       <ListItem label="性别" border>
      //         <Text>男</Text>
      //       </ListItem>
      //       <ListItem label="电话" border>
      //         <Text>18711321234</Text>
      //       </ListItem>
      //       <ListItem label="代理编号">
      //         <Text>2020001</Text>
      //       </ListItem>
      //     </View>
      //   </AtTabsPane>
      //   <AtTabsPane current={ current } index={ 1 }>
      //     <View className="card">
            
      //     </View>
      //   </AtTabsPane>
      // </AtTabs>
    )
  }
}

export default Profile